<template>
  <section class="jumbotron">
    <h1 class="jumbotron-heading">Search Github Users</h1>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="value"
      />
      <button @click="searchHandle">Search</button>
    </div>
  </section>
</template>

<script>
import axios from "axios"
export default {
  name: "Header",
  props:["getHandleData"],
  data(){
    return{
      value: ""
    }
  },

  methods:{
    async searchHandle(){

      //点击搜索按钮之后 发送请求之前 修改数据让页面显示正在搜索中
      this.getHandleData({isInit: false , isSearch: true , })

      //请求数据
      const result = await axios.get(
        `https://api.github.com/search/users?q=${this.value}`
      );

      //如果查询不到用户 就修改数据显示查询用户失败
      if(result.data.items.length === 0){
        this.getHandleData({isSearch: false ,  isSuccess: true})
      }

      //数据请求回来之后 修改数据让页面展示数据
      this.getHandleData({isSearch: false ,  userList: result.data.items})

    }
  }
};
</script>

<style>
</style>